<template>

  <div class="theme-btn-con" :class="getTheme()">
    <Dropdown placement="bottom" :trigger="isPhone?'click':'hover'">
      <Icon type="ios-color-palette-outline" :size="21" :color="getColor()"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem @click.native="handleChange('light')">白色主题</DropdownItem>
        <DropdownItem @click.native="handleChange('dark')">黑色主题</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>

</template>
<script>
  export default {
    name: 'themeButton',
    props:{
       theme: {
        type: String,
        default: 'light',
      },
      isPhone:{
        type:Boolean,
        default:false
      }
    },
    computed: {

    },

    methods: {
      getTheme() {
        var key = this.theme;
        switch (key) {
          case 'light':
            return 'light'
            break;
          case 'dark':
            return 'dark'
            break;
          default:
            return ''
            break;
        }
      },
      getColor() {
        var key = this.theme;
        switch (key) {
          case 'light':
            return '#5c6b77'
            break;
          case 'dark':
            return '#ffffff'
            break;
          default:
            return ''
            break;
        }
      },
      handleChange(theme) {
        this.$emit('on-change-theme', theme)
      }
    },

  }
</script>

<style lang="less">
  @import "./theme-button.less";
</style>